<template>
  <view class="index-wrapper">
    <u-navbar :is-back="false" :title="title" title-color="white" :border-bottom="false" :background="background" title-size="34">
      <view class="u-nav-slot" slot="right">
        <div @click="showSZ = true">
          <u-icon name="arrow-down-fill" color="#fff" size="30"></u-icon>
        </div> </view
    ></u-navbar>
    <!-- 搜索下拉额外选项 -->
    <choice-selected :isVale.sync="showSZ" @onChoiceClick="onChoiceSz" v-if="showSZ" :choiceList="showSZList"></choice-selected>

    <view class="uni-container">
      <view class="search-container">
        <view class="uni-search">
          <!-- @change="changeInput" -->
          <u-button plain="true" shape="circle" :ripple="true" class="hangdle-say" size="mini" @click="tohand">操作指导</u-button>
          <u-search
            shape="round"
            action-text="查一查"
            class="search"
            placeholder="请输入搜索的股票代码"
            input-align="center"
            height="70"
            @custom="search"
            @search="search"
            v-model="keyword"
          />
        </view>
      </view>
      <!-- 搜索下拉额外选项 -->
      <choice-selected :isVale.sync="showSelect" @onChoiceClick="onChoiceClick" v-if="showSelect" :choiceList="showList"></choice-selected>
      <view v-else class="bottom-wrapper">
        <scroll-view
          scroll-y="true"
          :refresher-threshold="45"
          @refresherrefresh="refresherrefreshFun"
          :refresher-triggered="isRefresher"
          refresher-enabled="true"
        >
          <uni-table ref="table" filter-type="search" :loading="loadingb" border emptyText="暂无更多数据">
            <!-- 表头行 -->
            <view class="table_head">
              <uni-tr class="head-table">
                <uni-th width="200rpx" align="center">
                  <view class="head-table t1"> 历史日期</view>
                </uni-th>
                <uni-th width="90rpx" align="center">
                  <view class="head-table t1"> 当日幅度</view>
                </uni-th>
                <uni-th width="180rpx" align="center">
                  <view class="head-table t1"> 能量密度</view>
                </uni-th>
                <uni-th width="130rpx" align="center">
                  <view class="head-table t1"> 明日涨跌</view>
                </uni-th>
                <uni-th width="80rpx" align="center">
                  <view class="head-table t1"> 明日幅度</view>
                </uni-th>
              </uni-tr>
            </view>
            <!-- 表格数据行 -->
            <view class="table_body" :style="cpuheight">
              <uni-tr v-for="(item, index) in tableData" :key="index">
                <uni-td align="center" class="bgl">
                  <view class="row-table1" :style="theight"> {{ item.date }}</view>
                </uni-td>
                <uni-td align="center">
                  <view class="row-table2">{{ getvalue(item.currentRange) }}</view>
                </uni-td>
                <uni-td align="center">
                  <view class="row-table3"> {{ getNext(item.next) }}</view>
                </uni-td>
                <uni-td align="center">
                  <view
                    class="row-table4 green"
                    :class="{
                      red: item.mark === 'L',
                      bgl: index >= rangStartIndex && index <= rangEndIndex,
                      fontc: index >= rangStartIndex && index <= rangEndIndex && !item.mark
                    }"
                  >
                    {{ item.mark || '/' }}</view
                  >
                </uni-td>
                <uni-td align="center">
                  <view class="row-table5 green" :class="{ red: item.future > 0 }"> {{ getvalue(item.future) }}</view>
                </uni-td>
              </uni-tr>
            </view>
          </uni-table>
        </scroll-view>
        <view v-if="tableData.length > 0" class="below-s">{{ remark }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import ChoiceSelected from '../../components/choice-selected.vue'
import { dataList } from 'api/findData.js'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      isRefresher: false, // 下拉刷新
      title: '',
      showSZ: false,
      remark: '备注:L表示上涨，S表示下跌',
      tableData: [],
      keyword: '000001',
      loadingb: false,
      rangStartIndex: '',
      rangEndIndex: '',
      showSZList: [
        {
          value: '000001',
          label: '上证指数',
          stockType: 'zs'
        },
        {
          value: '399006',
          label: '创业板指',
          stockType: 'zs'
        }
      ],
      showList: [
        {
          value: '000001',
          label: '上证指数',
          stockType: 'zs'
        },
        {
          value: '000001',
          label: '平安银行',
          stockType: 'gg'
        }
      ],
      showSelect: false,
      background: {
        // 导航栏背景图
        backgroundImage: 'linear-gradient(to  right, #3ad1ff, #0055ff)'
      }
    }
  },
  components: {
    ChoiceSelected
  },
  onShow() {
    // console.log('我加载了!')
    this.keyword = this.vuex_num
    this.init()
  },
  created() {
    this.keyword = this.vuex_num
    this.selectedIndexs = []
    this.getData(this.keyword === '000001' ? '9000001' : this.keyword)
  },
  computed: {
    ...mapState(['vuex_num', 'stockType', 'vuex_token', 'vuex_vip']),
    cpuheight() {
      const h = this.safeAreaHeight - 95 - 120 - 70
      return `height:${h}px;`
    },
    theight() {
      const h = this.safeAreaHeight - 95 - 120 - 30 - 240
      const th = h / 11
      return `height:${th}px;line-height:${th}px;`
    }
  },
  methods: {
    init() {
      // try {
      //   this.getcareExist()
      // } catch (error) {}
      this.getData(this.keyword)
    },
    async refresherrefreshFun() {
      console.log('触发下拉刷新了')
      this.isRefresher = true
      await this.getData(this.keyword, false)
      // 停止下拉刷新效果
      this.isRefresher = false
    },
    async onPullDownfresh() {
      await this.getData(this.keyword)
      // 停止下拉刷新效果
      uni.stopPullDownRefresh()
    },
    // 搜索
    async search() {
      if (!this.vuex_token) {
        this.showPop = true
        return
      }
      if (/[\u4e00-\u9fa5]/.test(this.keyword)) {
        this.$mytip.toast('请输入股票代码！')
        this.keyword = this.keyword
          .split('')
          .filter(char => !isNaN(parseInt(char)))
          .join('')
        return
      }

      if (!this.keyword) {
        this.$mytip.toast('请输入股票代码！')
        return
      }

      this.$u.vuex('vuex_num', this.keyword)
      if (this.keyword === '000001') {
        this.showSelect = true
      } else {
        // await this.getcareExist()
        this.getData(this.keyword)
      }
    },
    /**
     * @desc: 能量值格式化
     * @author: majun
     * @param {*} val
     */
    getNext(val) {
      if (val > 999) {
        return Math.round(val)
      } else return val || ''
    },
    onChoiceClick(obj) {
      this.$u.vuex('vuex_num', obj.value)
      this.$u.vuex('stockType', obj.stockType)
      this.keyword = this.vuex_num
      this.getData(obj.value, { stockType: obj.stockType })
    },
    onChoiceSz(obj) {
      this.$u.vuex('vuex_num', obj.value)
      this.$u.vuex('vuex_num', obj.value)
      this.keyword = this.vuex_num

      this.getData(obj.value, { stockType: obj.stockType })
    },
    /**
     * @desc: 四舍五入保留2位小数（不够位数，则用0替补）
     * @author: majun
     * @param {*} val
     */
    getvalue(val) {
      function keepTwoDecimalFull(num) {
        var result = parseFloat(num)
        if (isNaN(result)) {
          console.error('传递参数错误，请检查！')
          return false
        }
        result = Math.round(num * 100) / 100
        var sx = result.toString()
        var posDecimal = sx.indexOf('.')
        if (posDecimal < 0) {
          posDecimal = sx.length
          sx += '.'
        }
        while (sx.length <= posDecimal + 2) {
          sx += '0'
        }
        return sx + '%'
      }
      return (val && keepTwoDecimalFull(val)) || ''
    },
    /**
     * @desc: 获取数据
     * @author: majun
     * @param {*} id
     */
    async getData(id = '000001') {
      let params = {
        stockType: this.stockType
      }
      this.loadingb = true
      try {
        const { data } = await dataList(id, params)
        const { name, remark, rangStartIndex, rangEndIndex, data: datas } = data
        this.tableData = datas || []
        this.rangStartIndex = rangStartIndex
        this.rangEndIndex = rangEndIndex
        this.title = name
        this.remark = remark
        this.loadingb = false
      } catch (error) {
        this.loadingb = false
      }
    },
    /**
     * @desc: 下拉选择后
     * @author: majun
     */
    selectClick() {
      this.showSelect = false
    },
    /**
     * @desc:操作查看
     * @author: majun
     */
    tohand() {
      console.log('调转图片')
      this.$u.route('/pages/guidance')
    },
    changeInput(val) {
      // 只能输入数字的验证;
      const inputType = /[^\d]/g // 想限制什么类型在这里换换正则就可以了
      this.$nextTick(function () {
        this.keyword = this.keyword.replace(inputRule, '')
      })
    }
  }
}
</script>

<style lang="scss">
.bgl {
  background: #ffff00;
}
.fontc {
  color: #ffff00 !important;
}
/* 表格标题固定定位 */
.table_head {
  position: absolute;
  top: 0;
  left: 0;
}

.table_body {
  margin-top: 120rpx;
  overflow: auto;
}
.row-table1 {
  width: 150rpx;
}
.row-table2 {
  width: 100rpx;
}
.row-table3 {
  width: 120rpx;
}
.row-table4 {
  width: 110rpx;
}

.uni-table-td {
  font-size: 24rpx !important;
  color: #b4b4b4 !important;
  padding: 8px 8px !important;
  // line-height: 48rpx !important;
}
.hangdle-say {
  padding-top: 2rpx;
  padding-right: 10rpx;

  .u-btn--default {
    color: #fff !important;
  }
  .u-size-mini {
    width: 148rpx !important;
    height: 62rpx !important;
    line-height: 62rpx !important;
    font-size: 28rpx !important;
    background: linear-gradient(to right, #3ad1ff, #0055ff);
  }
}
.uni-search {
  background-color: #fafafa;
  display: flex;
  border-top-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
  padding: 20rpx 32rpx 20rpx 22rpx;
}
.search {
  flex: 1;
}
// 表头文字大小
.head-table {
  font-size: 24rpx;
}
.red {
  color: red !important;
}
.green {
  color: #1bca7e;
}
// 表头颜色
.uni-table-th {
  color: #616161 !important;
}
.table--border {
  border-right: 1px #fff solid !important;
}
.below-s {
  font-size: 24rpx;
  text-align: left;
  margin-top: 4px;
  color: rgb(168, 166, 166);
}
.uni-group {
  display: flex;
  align-items: center;
}
.bottom-wrapper {
  text-align: center;
  padding: 0 10rpx;
}
.u-close-wrap {
  .u-icon__icon {
    font-size: 22px !important;
  }
}
.t1 {
  margin: 0 auto;
  width: 60rpx;
}
.u-action-active {
  width: 90rpx !important;
}
.search-container {
  background: linear-gradient(to right, #3ad1ff, #0055ff);
}
.empty-border {
  top: 50%;
  font-size: 16px !important;
}
.u-nav-slot {
  margin-right: 60rpx;
}
</style>
